<template>
  <div class="login-container">
    <van-nav-bar class="first" left-text="黑马家政"></van-nav-bar>
    <!-- 导航栏 -->
    <van-nav-bar>
      <span slot="title" class="text">登录</span>
    </van-nav-bar>

    <!-- 登录表单 -->
    <van-form>
      <van-field name="用户名" placeholder="请输入用户名" v-model="user">
        <i slot="left-icon" class="iconfont icon-wode"></i>
      </van-field>
      <van-field
        name="密码"
        placeholder="请输入密码"
        type="password"
        v-model="pwd"
      >
        <i slot="left-icon" class="iconfont icon-yanzhengma"></i>
      </van-field>
      <div style="margin: 16px" class="login-btn-wrap">
        <van-button block type="info" class="login-btn" @click="login"
          >登录</van-button
        >
      </div>
    </van-form>
    <div class="login-f">
      <p>——黑马家政·给您更好更全面的服务——</p>
      <p>
        ©️ Copyright:2019-2029 长沙黑马家政服务有限公司 版权所有 ｜ 湘ICP备
        17003141
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data () {
    return {
      user: '干饭王',
      pwd: '123456'
    }
  },
  computed: {},
  watch: {},
  created () { },
  mounted () { },
  methods: {
    login () {
      if (this.user === '干饭王' && this.pwd === '123456') {
        this.$router.push('/my')
        const str = this.pwd
        const uname = this.user
        this.$store.commit('setUser', str)
        this.$store.commit('setUname', uname)
        this.$toast.success('登录成功')
        this.$toast.setDefaultOptions({ duration: 1000 })
      } else {
        this.$toast.fail('请输入正确的账号密码')
        this.$toast.setDefaultOptions({ duration: 1000 })
      }
    }
  }
}
</script>

<style scoped lang="less">
.login-container {
  margin-top: 260px;
  /deep/ .first {
    background-color: #3f51b5 !important;
    color: #000 !important;
    position: absolute;
    width: 100%;
    top: 0;
  }
  .van-nav-bar {
    background-color: #fff;
    /deep/.van-nav-bar__title {
      color: #3f51b5;
    }
    .van-image--round img {
      font-size: 22px;
      border: 1px solid #3f51b5;
      // color: #fff;
    }
  }
  .iconfont {
    font-size: 37px;
    margin-right: 10px;
  }
  .login-btn-wrap {
    padding: 53px 33px;
    .login-btn {
      background-color: #3f51b5;
      border: none;
      border-radius: 50px;
    }
  }
  .login-f {
    margin-top: 88px;
    text-align: center;
    font-size: 12px;
    color: rgba(102, 102, 102, 0.6);
  }
}

/deep/ .van-button--primary {
  border-color: #1989fa !important;
}
</style>
